<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-html="$store.state.Breadcrumb.Cascader"
      ></el-breadcrumb-item>
    </el-breadcrumb>
    <el-cascader
      v-model="selectnode"
      ref="mycascader"
      :options="optionList"
      :props="options"
      :show-all-levels="true"
      placeholder="请选择..."
    ></el-cascader>
    <button @click="query">获取值</button>
    <hr>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectnode: [],
      optionList: [],
      options: {
        value: "Id",
        label: "Name",
        children: "Children",
      },
    };
  },
  mounted() {
    this.getcascaders();
  },
  methods: {
    query() {
      var val = this.$refs.mycascader.getCheckedNodes()[0].value;
      var labels = this.$refs.mycascader.getCheckedNodes()[0].pathLabels;
      console.log(val);
      console.info(labels);
    },
    //获取爱好集合
    getcascaders() {
      // 这是从后台获取数据
      this.$axios({
        url: "http://localhost:53464/api/values/GetCascaders",
        method: "get",
      })
        .then((res) => {
          // 调用递归方法，去除级联数据后将数据赋值给级联选择器
          this.optionList = this.getNodeData(res.data);
          // this.selectnode = [1,2,5];

          // "1,2,5".split(',').forEach(m=>{
          //   this.selectnode.push(parseInt(m))
          // });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 递归方法
    getNodeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].Children == null || data[i].Children.length < 1) {
          data[i].Children = undefined;
        } else {
          // Children 递归调用 本方法
          this.getNodeData(data[i].Children);
        }
      }
      return data;
    },
  },
};
</script>

<style>
</style>